<!doctype html>
<html lang="zh-CN">
 <head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>年度规划项目 - 学员端</title> 
  <script src="../javascript/reload.js"></script> 
  <script src="./1967841389332922368/resource_8922710000.js"></script> 
  <link href="./1967841389332922368/all.min.css" rel="stylesheet"> 
  <script src="./1967841389332922368/echarts.min.js"></script> 
  <script>tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#4080FF',
                        accent: '#0E42D2',
                        neutral: '#F5F7FA',
                        'neutral-dark': '#E5E6EB',
                        'text-primary': '#1D2129',
                        'text-secondary': '#4E5969',
                        'text-tertiary': '#86909C',
                        warning: '#FAAD14',
                        success: '#52C41A',
                        danger: '#FF4D4F',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    spacing: {
                        '220': '220px',
                        '250': '250px',
                    }
                },
            }
        }</script> 
  <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .menu-active {
                @apply bg-primary/10 text-primary border-l-4 border-primary;
            }
            .menu-item {
                @apply flex items-center px-4 py-3 text-text-secondary hover:bg-neutral-dark transition-all duration-200 cursor-pointer;
            }
            .menu-item-active {
                @apply bg-primary/10 text-primary border-l-4 border-primary;
            }
            .submenu-item {
                @apply flex items-center px-8 py-2.5 text-text-secondary hover:bg-neutral-dark transition-all duration-200 cursor-pointer text-sm;
            }
            .submenu-item-active {
                @apply bg-primary/10 text-primary;
            }
            .card-shadow {
                box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.06);
            }
            .btn-primary {
                @apply bg-primary text-white px-4 py-2 rounded-md hover:bg-accent transition-all duration-200 flex items-center justify-center;
            }
            .btn-secondary {
                @apply bg-white text-primary border border-primary px-4 py-2 rounded-md hover:bg-primary/5 transition-all duration-200 flex items-center justify-center;
            }
            .btn-outline {
                @apply bg-white text-text-secondary border border-neutral-dark px-4 py-2 rounded-md hover:bg-neutral transition-all duration-200 flex items-center justify-center;
            }
            .input-field {
                @apply w-full px-3 py-2 border border-neutral-dark rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all duration-200;
            }
            .table-header {
                @apply bg-neutral text-text-secondary text-sm font-medium px-4 py-3;
            }
            .table-row {
                @apply border-b border-neutral-dark hover:bg-neutral/50 transition-all duration-200;
            }
            .badge {
                @apply px-2 py-1 rounded-full text-xs font-medium;
            }
            .badge-success {
                @apply bg-green-100 text-green-700;
            }
            .badge-warning {
                @apply bg-yellow-100 text-yellow-700;
            }
            .badge-danger {
                @apply bg-red-100 text-red-700;
            }
            .badge-info {
                @apply bg-blue-100 text-blue-700;
            }
            .badge-purple {
                @apply bg-purple-100 text-purple-700;
            }
            .badge-primary-light {
                @apply bg-primary/10 text-primary;
            }
            .badge-warning-light {
                @apply bg-warning/10 text-warning;
            }
        }
    </style> 
 </head> 
 <body class="font-inter bg-neutral text-text-primary h-screen flex overflow-hidden"> 
  <!-- 左侧菜单区域 --> 
  <aside id="sidebar" class="w-220 bg-white h-full shadow-md z-10 transition-all duration-300 ease-in-out"> 
   <!-- 品牌标识 --> 
   <div class="flex items-center justify-center h-16 border-b border-neutral-dark"> 
    <div class="flex items-center"> 
     <i class="fas fa-chart-line text-primary text-2xl mr-3"> </i> 
     <h1 class="text-xl font-bold text-primary"> Hi Quick AI </h1> 
    </div> 
   </div> 
   <!-- 菜单列表 --> 
   <nav class="py-4 h-[calc(100%-4rem)] overflow-y-auto scrollbar-hide"> 
    <!-- 每月必做 --> 
    <div class="menu-group" data-ytoriginindex="0" data-ytindex="0">
     <a class="yt-a-defalut-link menu-item flex justify-between" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1378&amp;h=913&amp;appuuid=1969721745313103872&amp;version=2&amp;pageType=web&amp;uuid=1968264071639728128&amp;appName=demo" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: inline; padding: 0px; border: 0px; box-shadow: none;"> 
      <div class="menu-item flex justify-between" data-menu="monthly" data-selectorname="#id-a33rx" style> 
       <div class="flex items-center"> 
        <i class="fas fa-calendar-check text-lg mr-3"> </i> 
        <span> 工作台 </span> 
       </div> 
      </div> </a> 
     <div class="submenu hidden" id="submenu-monthly"> 
     </div> 
    </div> 
    <!-- 公司公告 --> 
    <div class="menu-group" data-ytextravalue="extra-26flsc3no"> 
     <a class="yt-a-defalut-link menu-item flex justify-between" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1359&amp;h=913&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1968578812111224832&amp;appName=demo" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: inline; padding: 0px; border: 0px; box-shadow: none;"> 
      <div class="menu-item flex justify-between" data-menu="announcements" data-ytparentvalue="extra-26flsc3no" data-ytoriginindex="0" data-ytindex="0" data-selectorname="#id-boafb" style="opacity: 1;"> 
       <div class="flex items-center"> 
        <i class="fas fa-bullhorn text-lg mr-3"> </i> 
        <span> 公司公告 </span> 
       </div> 
      </div> </a> 
     <div class="submenu hidden" id="submenu-announcements" data-ytoriginindex="1" data-ytindex="1"> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=2&amp;pageType=web&amp;uuid=1967783006529650688&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: flex; padding: 0px; border: 0px; box-shadow: none;"> </a> 
     </div> 
    </div> 
    <!-- 年规管理 --> 
    <div class="menu-group"> 
     <div class="menu-item menu-item-active flex justify-between" data-menu="planning"> 
      <div class="flex items-center"> 
       <i class="fas fa-bullseye text-lg mr-3"> </i> 
       <span> 年规管理 </span> 
      </div> 
      <i class="fas fa-chevron-down text-xs transition-transform duration-200"> </i> 
     </div> 
     <div class="submenu" id="submenu-planning" data-ytextravalue="extra-ijsgxvl41"> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1321&amp;h=831&amp;appuuid=1969721745313103872&amp;version=2&amp;pageType=web&amp;uuid=1969787710210048000&amp;appName=demo1" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="false" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" data-ytoriginindex="0" data-ytindex="0" data-ytparentvalue="extra-ijsgxvl41"> 
       <div class="submenu-item" data-page="goal-dashboard" data-selectorname="#id-3m52y"> 
        <i class="fas fa-chart-pie text-xs mr-2"> </i> 
        <span data-selectorname="span"> 目标进度看板 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1390&amp;h=831&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1969803110087917568&amp;appName=demo1" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="false" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" data-ytoriginindex="1" data-ytindex="1"> 
       <div class="submenu-item" data-page="performance-entry" data-selectorname="#id-38pis"> 
        <i class="fas fa-pencil-alt text-xs mr-2"> </i> 
        <span data-selectorname="span"> 业绩回填 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967832363245240320&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" data-ytoriginindex="2" data-ytindex="2"> 
       <div class="submenu-item" data-page="product-library" data-selectorname="#id-l1iwk"> 
        <i class="fas fa-box text-xs mr-2"> </i> 
        <span> 产品库 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1321&amp;h=831&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1969766167933353984&amp;appName=demo1" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="false" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" data-ytparentvalue="extra-ijsgxvl41" data-ytoriginindex="3" data-ytindex="3"> 
       <div class="submenu-item" data-page="marketing-plan" data-selectorname="#id-mmjwj"> 
        <i class="fas fa-bullhorn text-xs mr-2"> </i> 
        <span data-selectorname="span"> 营销计划 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967839529905684480&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" data-ytoriginindex="4" data-ytindex="4"> 
       <div class="submenu-item" data-page="customer-records" data-selectorname="#id-wz4qh"> 
        <i class="fas fa-users text-xs mr-2"> </i> 
        <span data-selectorname="span"> 客户档案 </span> 
       </div> </a> 
      <div class="submenu-item submenu-item-active" data-page="pk-activities" data-ytoriginindex="5" data-ytindex="5"> 
       <i class="fas fa-trophy text-xs mr-2"> </i> 
       <span> PK 活动 </span> 
      </div> 
     </div> 
    </div> 
    <!-- 工作管理 --> 
    <div class="menu-group" data-ytextravalue="extra-7dz0rcmie"> 
     <div class="menu-item flex justify-between" data-menu="work" data-ytparentvalue="extra-7dz0rcmie" data-ytoriginindex="0" data-ytindex="0"> 
      <div class="flex items-center"> 
       <i class="fas fa-briefcase text-lg mr-3"> </i> 
       <span> 工作管理 </span> 
      </div> 
      <i class="fas fa-chevron-right text-xs transition-transform duration-200"> </i> 
     </div> 
     <div class="submenu hidden" id="submenu-work" data-ytextravalue="extra-50pbew6la" data-ytoriginindex="1" data-ytindex="1"> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967843857995399168&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" data-ytoriginindex="0" data-ytindex="0"> 
       <div class="submenu-item" data-page="work-dashboard" data-selectorname="#id-l1ju5"> 
        <i class="fas fa-chart-bar text-xs mr-2"> </i> 
        <span> 周日报管理 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967850301578805248&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" data-ytoriginindex="1" data-ytindex="1"> 
       <div class="submenu-item" data-page="meeting-plan" data-selectorname="#id-c6u6o"> 
        <i class="fas fa-calendar-alt text-xs mr-2"> </i> 
        <span> 会议计划 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967852373321711616&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" data-ytparentvalue="extra-50pbew6la" data-ytoriginindex="2" data-ytindex="2"> 
       <div class="submenu-item" data-page="work-tasks" data-selectorname="#id-f2yob"> 
        <i class="fas fa-tasks text-xs mr-2"> </i> 
        <span> 工作任务 </span> 
       </div> </a> 
     </div> 
    </div> 
    <!-- 学习成长 --> 
    <div class="menu-group"> 
     <div class="menu-item flex justify-between" data-menu="learning"> 
      <div class="flex items-center"> 
       <i class="fas fa-graduation-cap text-lg mr-3"> </i> 
       <span> 学习成长 </span> 
      </div> 
      <i class="fas fa-chevron-right text-xs transition-transform duration-200"> </i> 
     </div> 
     <div class="submenu hidden" id="submenu-learning"> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1113&amp;h=728&amp;appuuid=1969721745313103872&amp;version=2&amp;pageType=web&amp;uuid=1968967895824203776&amp;appName=年规学员端最新版1.1" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="false" style="display: flex; padding: 0px; border: 0px; box-shadow: none;"> 
       <div class="submenu-item" data-page="company-culture" data-selectorname="#id-zzrx0"> 
        <i class="fas fa-building text-xs mr-2"> </i> 
        <span data-selectorname="span"> 企业文化 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967868783729049600&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: flex; padding: 0px; border: 0px; box-shadow: none;"> 
       <div class="submenu-item" data-page="course-center" data-selectorname="#id-sjetc"> 
        <i class="fas fa-book-open text-xs mr-2"> </i> 
        <span data-selectorname="span"> 课程中心 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967868795963834368&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: flex; padding: 0px; border: 0px; box-shadow: none;"> 
       <div class="submenu-item" data-page="knowledge-base" data-selectorname="#id-4whle"> 
        <i class="fas fa-book text-xs mr-2"> </i> 
        <span data-selectorname="span"> 知识库 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967868797977100288&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: flex; padding: 0px; border: 0px; box-shadow: none;"> 
       <div class="submenu-item" data-page="learning-plan" data-selectorname="#id-wefth"> 
        <i class="fas fa-clipboard-list text-xs mr-2"> </i> 
        <span data-selectorname="span"> 学习计划 </span> 
       </div> </a> 
     </div> 
    </div> 
    <!-- 个人档案 --> 
    <div class="menu-group"> 
     <div class="menu-item flex justify-between" data-menu="profile"> 
      <div class="flex items-center"> 
       <i class="fas fa-user text-lg mr-3"> </i> 
       <span> 个人档案 </span> 
      </div> 
      <i class="fas fa-chevron-right text-xs transition-transform duration-200"> </i> 
     </div> 
     <div class="submenu hidden" id="submenu-profile"> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967868800292356096&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: flex; padding: 0px; border: 0px; box-shadow: none;"> 
       <div class="submenu-item" data-page="basic-info" data-selectorname="#id-6i4q6"> 
        <i class="fas fa-id-card text-xs mr-2"> </i> 
        <span> 基本信息 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967868801315766272&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: flex; padding: 0px; border: 0px; box-shadow: none;"> 
       <div class="submenu-item" data-page="account-settings" data-selectorname="#id-nfwkb"> 
        <i class="fas fa-cog text-xs mr-2"> </i> 
        <span> 账号设置 </span> 
       </div> </a> 
     </div> 
    </div> 
   </nav> 
  </aside> 
  <!-- 右侧内容区域 --> 
  <main class="flex-1 flex flex-col overflow-hidden"> 
   <!-- 顶部导航栏 --> 
   <header class="h-16 bg-white border-b border-neutral-dark flex items-center justify-between px-6 z-10"> 
    <div class="flex items-center"> 
     <button id="toggle-sidebar" class="mr-4 text-text-secondary hover:text-primary transition-colors duration-200"> <i class="fas fa-bars text-xl"> </i> </button> 
     <div class="text-sm text-text-tertiary" id="breadcrumb"> 
      <span> 年规管理 </span> 
      <i class="fas fa-angle-right mx-2 text-xs"> </i> 
      <span> PK 活动 </span> 
     </div> 
    </div> 
    <div class="flex items-center space-x-6"> 
     <div class="relative"> 
      <input type="text" placeholder="搜索..." class="pl-10 pr-4 py-2 rounded-full text-sm border border-neutral-dark focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary w-64"> 
      <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-text-tertiary"> </i> 
     </div> 
     <div class="relative"> 
      <button class="relative text-text-secondary hover:text-primary transition-colors duration-200"> <i class="fas fa-bell text-xl"> </i> <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"> </span> </button> 
     </div> 
     <div class="flex items-center cursor-pointer group"> 
      <img src="./1967841389332922368/f48e4ae6256cb09fa61d11486866b14f.png" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-transparent group-hover:border-primary transition-all duration-200"> 
      <div class="ml-2 hidden md:block"> 
       <div class="text-sm font-medium">
         张明 
       </div> 
       <div class="text-xs text-text-tertiary">
         销售部 
       </div> 
      </div> 
      <i class="fas fa-angle-down ml-1 text-text-tertiary"> </i> 
     </div> 
    </div> 
   </header> 
   <!-- 内容滚动区域 --> 
   <div class="flex-1 overflow-y-auto p-6 bg-neutral" id="content-area"> 
    <!-- PK活动页面 --> 
    <div class="page active" id="page-pk-activities"> 
     <div class="flex justify-between items-center mb-6"> 
      <h2 class="text-2xl font-bold"> PK 活动 </h2> 
      <div class="flex space-x-3"> 
       <button class="btn-primary" id="add-pk-activity-btn"> <i class="fas fa-plus mr-2"> </i> 创建PK活动 </button> 
       <button class="btn-secondary" id="import-pk-activity-btn"> <i class="fas fa-upload mr-2"> </i> 导入 </button> 
       <button class="btn-outline" id="export-pk-activity-btn"> <i class="fas fa-download mr-2"> </i> 导出 </button> 
      </div> 
     </div> 
     <!-- PK活动统计卡片 --> 
     <div class="grid grid-cols-12 gap-6 mb-6"> 
      <div class="col-span-3 bg-white rounded-lg card-shadow p-5"> 
       <div class="text-text-tertiary text-sm mb-2">
         进行中活动 
       </div> 
       <div class="flex items-end justify-between mb-4"> 
        <div> 
         <span class="text-3xl font-bold"> 3 </span> 
         <span class="text-green-500 text-sm ml-2"> <i class="fas fa-arrow-up"> </i> 1 </span> 
        </div> 
        <div class="text-text-tertiary text-sm">
          较上月 
        </div> 
       </div> 
       <div class="flex items-center text-sm text-primary mt-2"> 
        <i class="fas fa-info-circle mr-1"> </i> 
        <span> 本月新增1个 </span> 
       </div> 
      </div> 
      <div class="col-span-3 bg-white rounded-lg card-shadow p-5"> 
       <div class="text-text-tertiary text-sm mb-2">
         已结束活动 
       </div> 
       <div class="flex items-end justify-between mb-4"> 
        <div> 
         <span class="text-3xl font-bold"> 8 </span> 
         <span class="text-green-500 text-sm ml-2"> <i class="fas fa-arrow-up"> </i> 2 </span> 
        </div> 
        <div class="text-text-tertiary text-sm">
          较上季度 
        </div> 
       </div> 
       <div class="w-full bg-neutral rounded-full h-2 mb-1"> 
        <div class="bg-secondary h-2 rounded-full" style="width: 70%"> 
        </div> 
       </div> 
       <div class="flex justify-between text-xs text-text-tertiary"> 
        <span> 完成率: 70% </span> 
        <span> 目标达成率 </span> 
       </div> 
      </div> 
      <div class="col-span-3 bg-white rounded-lg card-shadow p-5"> 
       <div class="text-text-tertiary text-sm mb-2">
         参与团队数 
       </div> 
       <div class="flex items-end justify-between mb-4"> 
        <div> 
         <span class="text-3xl font-bold"> 12 </span> 
         <span class="text-green-500 text-sm ml-2"> <i class="fas fa-arrow-up"> </i> 3 </span> 
        </div> 
        <div class="text-text-tertiary text-sm">
          较上季度 
        </div> 
       </div> 
       <div class="flex items-center text-sm text-primary mt-2"> 
        <i class="fas fa-info-circle mr-1"> </i> 
        <span> 覆盖所有销售团队 </span> 
       </div> 
      </div> 
      <div class="col-span-3 bg-white rounded-lg card-shadow p-5"> 
       <div class="text-text-tertiary text-sm mb-2">
         参与人数 
       </div> 
       <div class="flex items-end justify-between mb-4"> 
        <div> 
         <span class="text-3xl font-bold"> 86 </span> 
         <span class="text-green-500 text-sm ml-2"> <i class="fas fa-arrow-up"> </i> 15% </span> 
        </div> 
        <div class="text-text-tertiary text-sm">
          同比增长 
        </div> 
       </div> 
       <div class="flex items-center text-sm text-primary mt-2"> 
        <i class="fas fa-info-circle mr-1"> </i> 
        <span> 参与率: 82% </span> 
       </div> 
      </div> 
     </div> 
     <!-- 活动卡片区域 --> 
     <div class="mb-8"> 
      <div class="flex justify-between items-center mb-4"> 
       <h3 class="text-lg font-semibold"> 进行中的活动 </h3> 
       <a href="javascript:void(0);" class="text-primary text-sm hover:underline"> 查看全部 </a> 
      </div> 
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6" data-selectorname="#id-u87iy"> 
       <div class="border border-neutral-dark rounded-lg overflow-hidden hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1"> 
        <div class="h-40 bg-gradient-to-r from-primary to-primary-dark relative" data-ytextravalue="extra-2cfyapmfe"> 
         <img alt="销售冠军赛活动" class="w-full h-full object-cover opacity-30" src="./1967841389332922368/96e3974d4a9a8061baf1d1bf2ac8efc7.png" data-ytoriginindex="0" data-ytindex="0"> 
         <div class="absolute inset-0 flex items-center justify-center" data-ytextravalue="extra-6sryq9tgf" data-ytparentvalue="extra-2cfyapmfe" data-ytoriginindex="1" data-ytindex="1" style="background-image:url(https://design.gemcoder.com/api/upload/appResource/cXBNxZaRd8uu_EaYoh5Sb.jpg);background-size:cover;background-position:center"> 
         </div> 
         <div class="absolute top-3 right-3" data-ytoriginindex="2" data-ytindex="2"> 
         </div> 
        </div> 
        <div class="p-4" data-ytextravalue="extra-clvkrh87u"> 
         <h4 class="text-2xl font-bold text-white" data-ytparentvalue="extra-6sryq9tgf" data-ytoriginindex="0" data-ytindex="0" style="opacity: 1; font-family: Inter, system-ui, sans-serif; font-size: 24px; font-weight: 700; font-style: normal; line-height: 32px; text-align: start; text-indent: 0px;color:#000000FF;"> 第四季度销售冠军赛 </h4> 
         <div class="flex items-center justify-between mb-3" data-ytoriginindex="1" data-ytindex="1"> 
          <div class="text-sm text-text-secondary"> 
           <i class="fas fa-calendar mr-1"> </i> 2023-10-01 至 2023-12-31 
          </div> 
          <div class="text-sm font-medium text-primary">
            剩余46天 
          </div> 
         </div> 
         <p class="text-sm text-text-secondary mb-4" data-ytoriginindex="2" data-ytindex="2"> 第四季度销售业绩竞赛，评选季度销售冠军，奖励丰厚奖品和晋升机会。 </p> 
         <div class="mb-4" data-ytoriginindex="3" data-ytindex="3"> 
          <div class="flex items-center justify-between text-sm mb-1"> 
           <span class="text-text-tertiary"> 个人当前排名 </span> 
           <span class="font-medium"> 第3名 </span> 
          </div> 
          <div class="w-full bg-neutral rounded-full h-2"> 
           <div class="bg-primary h-2 rounded-full" style="width: 75%;"> 
           </div> 
          </div> 
         </div> 
         <div class="flex items-center justify-between" data-ytoriginindex="4" data-ytindex="4"> 
          <div class="flex -space-x-2"> 
           <img alt="参与者" class="w-8 h-8 rounded-full border-2 border-white" src="https://design.gemcoder.com/staticResource/echoAiSystemImages/23b8b1842d9d060a76ec9841dcedf1d5.png"> 
           <img alt="参与者" class="w-8 h-8 rounded-full border-2 border-white" src="./1967841389332922368/23b8b1842d9d060a76ec9841dcedf1d5.png"> 
           <img alt="参与者" class="w-8 h-8 rounded-full border-2 border-white" src="./1967841389332922368/23b8b1842d9d060a76ec9841dcedf1d5.png"> 
           <div class="w-8 h-8 rounded-full border-2 border-white bg-neutral flex items-center justify-center text-xs text-text-tertiary">
             +12 
           </div> 
          </div> 
          <button class="text-primary text-sm hover:underline view-activity-btn" data-activity-id="1"> 查看排行榜 </button> 
         </div> 
        </div> 
       </div> 
       <div class="border border-neutral-dark rounded-lg overflow-hidden hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1"> 
        <div class="h-40 bg-gradient-to-r from-warning to-warning/80 relative" data-ytextravalue="extra-rz0n4wc36"> 
         <img alt="团队PK赛活动" class="w-full h-full object-cover opacity-30" src="./1967841389332922368/e310938f8ff09714601525528d00f851.png" data-ytoriginindex="0" data-ytindex="0"> 
         <div class="absolute inset-0 flex items-center justify-center" data-ytparentvalue="extra-rz0n4wc36" data-ytoriginindex="1" data-ytindex="1" data-ytextravalue="extra-b55tiskn8" style="background-image:url(https://design.gemcoder.com/api/upload/appResource/oZFmQYztAdoQpsmLiqu1e.png);background-size:cover;background-position:center;"> 
         </div> 
         <div class="absolute top-3 right-3" data-ytoriginindex="2" data-ytindex="2"> 
         </div> 
        </div> 
        <div class="p-4" data-ytextravalue="extra-g33wymgxi"> 
         <h4 class="text-2xl font-bold text-white" contenteditable="true" style="outline: rgb(60, 142, 255) dashed 2px; opacity: 1; font-family: Inter, system-ui, sans-serif; font-size: 24px; font-weight: 700; font-style: normal; line-height: 32px; text-align: start; text-indent: 0px;color:#000000FF;" data-ytparentvalue="extra-b55tiskn8" data-ytoriginindex="0" data-ytindex="0"> 团队协作PK赛 </h4> 
         <div class="flex items-center justify-between mb-3" data-ytoriginindex="1" data-ytindex="1" data-ytparentvalue="extra-g33wymgxi"> 
          <div class="text-sm text-text-secondary"> 
           <i class="fas fa-calendar mr-1"> </i> 2023-11-01 至 2023-11-30 
          </div> 
          <div class="text-sm font-medium text-primary">
            剩余25天 
          </div> 
         </div> 
         <p class="text-sm text-text-secondary mb-4" data-ytoriginindex="2" data-ytindex="2"> 跨部门团队协作PK赛，促进团队合作，完成指定项目目标。 </p> 
         <div class="mb-4" data-ytoriginindex="3" data-ytindex="3"> 
          <div class="flex items-center justify-between text-sm mb-1"> 
           <span class="text-text-tertiary"> 团队当前排名 </span> 
           <span class="font-medium"> 第2名 </span> 
          </div> 
          <div class="w-full bg-neutral rounded-full h-2"> 
           <div class="bg-warning h-2 rounded-full" style="width: 85%;"> 
           </div> 
          </div> 
         </div> 
         <div class="flex items-center justify-between" data-ytoriginindex="4" data-ytindex="4"> 
          <div class="flex -space-x-2"> 
           <img alt="团队成员" class="w-8 h-8 rounded-full border-2 border-white" src="./1967841389332922368/23b8b1842d9d060a76ec9841dcedf1d5.png"> 
           <img alt="团队成员" class="w-8 h-8 rounded-full border-2 border-white" src="https://design.gemcoder.com/staticResource/echoAiSystemImages/23b8b1842d9d060a76ec9841dcedf1d5.png"> 
           <img alt="团队成员" class="w-8 h-8 rounded-full border-2 border-white" src="./1967841389332922368/23b8b1842d9d060a76ec9841dcedf1d5.png"> 
           <div class="w-8 h-8 rounded-full border-2 border-white bg-neutral flex items-center justify-center text-xs text-text-tertiary">
             +5 
           </div> 
          </div> 
          <button class="text-primary text-sm hover:underline view-activity-btn" data-activity-id="2"> 查看详情 </button> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <!-- 即将开始的活动 --> 
     <div class="mb-8"> 
      <div class="flex justify-between items-center mb-4"> 
       <h3 class="text-lg font-semibold"> 即将开始的活动 </h3> 
       <a href="javascript:void(0);" class="text-primary text-sm hover:underline"> 查看全部 </a> 
      </div> 
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> 
       <div class="border border-neutral-dark rounded-lg overflow-hidden hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1"> 
        <div class="h-40 bg-gradient-to-r from-secondary to-secondary/80 relative" data-ytextravalue="extra-1uh2c56yy"> 
         <img alt="新产品推广活动" class="w-full h-full object-cover opacity-30" src="./1967841389332922368/28f02a8e75d2e0fd5d0bbb667f7c7c59.png" data-ytoriginindex="0" data-ytindex="0"> 
         <div class="absolute inset-0 flex items-center justify-center" data-ytextravalue="extra-b98e5n639" data-ytparentvalue="extra-1uh2c56yy" data-ytoriginindex="1" data-ytindex="1" style="background-image:url(https://design.gemcoder.com/api/upload/appResource/YDNjHqmlelbqRD3hSiZRX.png);background-size:cover;background-position:center;"> 
         </div> 
         <div class="absolute top-3 right-3" data-ytoriginindex="2" data-ytindex="2"> 
         </div> 
        </div> 
        <div class="p-4"> 
         <h4 class="text-2xl font-bold text-white" data-ytparentvalue="extra-b98e5n639" data-ytoriginindex="0" data-ytindex="0" style="opacity: 1; font-family: Inter, system-ui, sans-serif; font-size: 24px; font-weight: 700; font-style: normal; line-height: 32px; text-align: start; text-indent: 0px;color:#000000FF;"> 新产品推广PK赛 </h4> 
         <div class="flex items-center justify-between mb-3"> 
          <div class="text-sm text-text-secondary"> 
           <i class="fas fa-calendar mr-1"> </i> 2023-12-01 至 2023-12-31 
          </div> 
          <div class="text-sm font-medium text-warning">
            还有15天 
          </div> 
         </div> 
         <p class="text-sm text-text-secondary mb-4"> 新产品上市推广PK赛，各团队推广新产品，提升市场占有率。 </p> 
         <div class="mb-4"> 
          <div class="flex items-center justify-between text-sm mb-1"> 
           <span class="text-text-tertiary"> 参与团队 </span> 
           <span class="font-medium"> 6个团队 </span> 
          </div> 
          <div class="w-full bg-neutral rounded-full h-2"> 
           <div class="bg-secondary h-2 rounded-full" style="width: 0%;"> 
           </div> 
          </div> 
         </div> 
         <div class="flex items-center justify-between"> 
          <div class="flex -space-x-2"> 
           <img alt="团队成员" class="w-8 h-8 rounded-full border-2 border-white" src="./1967841389332922368/23b8b1842d9d060a76ec9841dcedf1d5.png"> 
           <img alt="团队成员" class="w-8 h-8 rounded-full border-2 border-white" src="https://design.gemcoder.com/staticResource/echoAiSystemImages/23b8b1842d9d060a76ec9841dcedf1d5.png"> 
           <img alt="团队成员" class="w-8 h-8 rounded-full border-2 border-white" src="./1967841389332922368/23b8b1842d9d060a76ec9841dcedf1d5.png"> 
           <div class="w-8 h-8 rounded-full border-2 border-white bg-neutral flex items-center justify-center text-xs text-text-tertiary">
             +24 
           </div> 
          </div> 
          <button class="btn-secondary text-sm py-1 px-3 join-activity-btn" data-activity-id="3"> <i class="fas fa-bell mr-1"> </i> 提醒我 </button> 
         </div> 
        </div> 
       </div> 
       <div class="border border-neutral-dark rounded-lg overflow-hidden hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1"> 
        <div class="h-40 bg-gradient-to-r from-purple-500 to-purple-600 relative"> 
         <img alt="年终冲刺活动" class="w-full h-full object-cover opacity-30" src="./1967841389332922368/8c5f018fea51ce30ecc19d9d77786901.png"> 
         <div class="absolute inset-0 flex items-center justify-center" data-ytextravalue="extra-efqvuzs3h" style="background-image:url(https://design.gemcoder.com/api/upload/appResource/j1bNAnHiz0BsEq1YOZKm4.png);background-size:cover;background-position:center;"> 
         </div> 
         <div class="absolute top-3 right-3"> 
         </div> 
        </div> 
        <div class="p-4"> 
         <h4 class="text-2xl font-bold text-white" data-ytparentvalue="extra-efqvuzs3h" data-ytoriginindex="0" data-ytindex="0" style="opacity: 1; font-family: Inter, system-ui, sans-serif; font-size: 24px; font-weight: 700; font-style: normal; line-height: 32px; text-align: start; text-indent: 0px;color:#000000FF;"> 年终业绩冲刺赛 </h4> 
         <div class="flex items-center justify-between mb-3"> 
          <div class="text-sm text-text-secondary"> 
           <i class="fas fa-calendar mr-1"> </i> 2024-01-01 至 2024-01-31 
          </div> 
          <div class="text-sm font-medium text-warning">
            还有45天 
          </div> 
         </div> 
         <p class="text-sm text-text-secondary mb-4"> 年度最后冲刺，完成年度目标，赢取年终大奖。 </p> 
         <div class="mb-4"> 
          <div class="flex items-center justify-between text-sm mb-1"> 
           <span class="text-text-tertiary"> 参与人数 </span> 
           <span class="font-medium"> 32人已报名 </span> 
          </div> 
          <div class="w-full bg-neutral rounded-full h-2"> 
           <div class="bg-purple-500 h-2 rounded-full" style="width: 0%;"> 
           </div> 
          </div> 
         </div> 
         <div class="flex items-center justify-between"> 
          <div class="flex -space-x-2"> 
           <img alt="参与者" class="w-8 h-8 rounded-full border-2 border-white" src="./1967841389332922368/23b8b1842d9d060a76ec9841dcedf1d5.png"> 
           <img alt="参与者" class="w-8 h-8 rounded-full border-2 border-white" src="./1967841389332922368/23b8b1842d9d060a76ec9841dcedf1d5.png"> 
           <img alt="参与者" class="w-8 h-8 rounded-full border-2 border-white" src="./1967841389332922368/23b8b1842d9d060a76ec9841dcedf1d5.png"> 
           <div class="w-8 h-8 rounded-full border-2 border-white bg-neutral flex items-center justify-center text-xs text-text-tertiary">
             +29 
           </div> 
          </div> 
          <button class="btn-primary text-sm py-1 px-3 join-activity-btn" data-activity-id="4"> <i class="fas fa-user-plus mr-1"> </i> 立即报名 </button> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <!-- 已完成的活动 --> 
     <div class="mb-8" data-ytextravalue="extra-dvxhvlq2u"> 
      <div class="flex justify-between items-center mb-4" data-ytoriginindex="0" data-ytindex="0"> 
       <h3 class="text-lg font-semibold"> 已完成的活动 </h3> 
       <a href="javascript:void(0);" class="text-primary text-sm hover:underline"> 查看全部 </a> 
      </div> 
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6" data-selectorname="#id-8k3mz" data-ytparentvalue="extra-dvxhvlq2u" data-ytoriginindex="1" data-ytindex="1"> 
       <!-- PK活动类型分布 --> 
       <div class="border border-neutral-dark rounded-lg overflow-hidden hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1"> 
        <div class="h-40 bg-gradient-to-r from-info to-info/80 relative"> 
         <img alt="PK活动类型分布" class="w-full h-full object-cover opacity-30" src="./1967841389332922368/4bf137560ceec0f3f152398fbe8e5f7c.png"> 
         <div class="absolute inset-0 flex items-center justify-center" data-ytextravalue="extra-jq2e1sta9" style="background-image:url(https://design.gemcoder.com/api/upload/appResource/zXTPaFqlGSwYlkErWcJ5d.png);background-size:cover;background-position:center;"> 
         </div> 
         <div class="absolute top-3 right-3"> 
         </div> 
        </div> 
        <div class="p-4" data-ytextravalue="extra-rnn65ci6i"> 
         <h4 class="text-2xl font-bold text-white" data-ytparentvalue="extra-jq2e1sta9" data-ytoriginindex="0" data-ytindex="0" style="opacity: 1; font-family: Inter, system-ui, sans-serif; font-size: 24px; font-weight: 700; font-style: normal; line-height: 32px; text-align: start; text-indent: 0px;color:#000000FF;"> PK活动类型分布 </h4> 
         <div class="flex items-center justify-between mb-3" data-ytoriginindex="1" data-ytindex="1"> 
          <div class="text-sm text-text-secondary"> 
           <i class="fas fa-calendar mr-1"> </i> 2023-01-01 至 2023-09-30 
          </div> 
          <div class="text-sm font-medium text-secondary">
            已结束 
          </div> 
         </div> 
         <p class="text-sm text-text-secondary mb-4" data-ytoriginindex="2" data-ytindex="2"> 分析各类PK活动的参与度和效果，为未来活动策划提供数据支持。 </p> 
         <div class="mb-4" data-ytoriginindex="3" data-ytindex="3"> 
          <div class="flex items-center justify-between text-sm mb-1"> 
           <span class="text-text-tertiary"> 完成状态 </span> 
           <span class="font-medium"> 100% </span> 
          </div> 
          <div class="w-full bg-neutral rounded-full h-2"> 
           <div class="bg-info h-2 rounded-full" style="width: 100%;"> 
           </div> 
          </div> 
         </div> 
         <div class="flex items-center justify-between" data-ytoriginindex="4" data-ytindex="4"> 
          <div class="flex -space-x-2"> 
           <img alt="参与者" class="w-8 h-8 rounded-full border-2 border-white" src="./1967841389332922368/23b8b1842d9d060a76ec9841dcedf1d5.png"> 
           <img alt="参与者" class="w-8 h-8 rounded-full border-2 border-white" src="https://design.gemcoder.com/staticResource/echoAiSystemImages/23b8b1842d9d060a76ec9841dcedf1d5.png"> 
           <img alt="参与者" class="w-8 h-8 rounded-full border-2 border-white" src="https://design.gemcoder.com/staticResource/echoAiSystemImages/23b8b1842d9d060a76ec9841dcedf1d5.png"> 
           <div class="w-8 h-8 rounded-full border-2 border-white bg-neutral flex items-center justify-center text-xs text-text-tertiary">
             +5 
           </div> 
          </div> 
          <button class="text-primary text-sm hover:underline view-activity-btn" data-activity-id="8"> 查看报告 </button> 
         </div> 
        </div> 
       </div> 
       <!-- PK活动维度分布 --> 
       <div class="border border-neutral-dark rounded-lg overflow-hidden hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1"> 
        <div class="h-40 bg-gradient-to-r from-purple-500 to-purple-600 relative"> 
         <img alt="PK活动维度分布" class="w-full h-full object-cover opacity-30" src="./1967841389332922368/be898f9b3601970be3dbc7015401802f.png"> 
         <div class="absolute inset-0 flex items-center justify-center" data-ytextravalue="extra-6siljet6p" style="background-image:url(https://design.gemcoder.com/api/upload/appResource/LCSs9OHrpAH_cowhq4gF9.png);background-size:cover;background-position:center;"> 
         </div> 
         <div class="absolute top-3 right-3" data-ytextravalue="extra-uk9ook102"> 
         </div> 
        </div> 
        <div class="p-4"> 
         <h4 class="text-2xl font-bold text-white" data-ytparentvalue="extra-6siljet6p" data-ytoriginindex="0" data-ytindex="0" style="opacity: 1; font-family: Inter, system-ui, sans-serif; font-size: 24px; font-weight: 700; font-style: normal; line-height: 32px; text-align: start; text-indent: 0px;color:#000000FF;"> PK活动维度分布 </h4> 
         <div class="flex items-center justify-between mb-3"> 
          <div class="text-sm text-text-secondary"> 
           <i class="fas fa-calendar mr-1"> </i> 2023-01-01 至 2023-09-30 
          </div> 
          <div class="text-sm font-medium text-secondary">
            已结束 
          </div> 
         </div> 
         <p class="text-sm text-text-secondary mb-4"> 多维度分析PK活动效果，包括业绩、客户满意度、团队协作等指标。 </p> 
         <div class="mb-4"> 
          <div class="flex items-center justify-between text-sm mb-1"> 
           <span class="text-text-tertiary"> 完成状态 </span> 
           <span class="font-medium"> 100% </span> 
          </div> 
          <div class="w-full bg-neutral rounded-full h-2"> 
           <div class="bg-purple-500 h-2 rounded-full" style="width: 100%;"> 
           </div> 
          </div> 
         </div> 
         <div class="flex items-center justify-between"> 
          <div class="flex -space-x-2"> 
           <img alt="参与者" class="w-8 h-8 rounded-full border-2 border-white" src="./1967841389332922368/23b8b1842d9d060a76ec9841dcedf1d5.png"> 
           <img alt="参与者" class="w-8 h-8 rounded-full border-2 border-white" src="./1967841389332922368/23b8b1842d9d060a76ec9841dcedf1d5.png"> 
           <img alt="参与者" class="w-8 h-8 rounded-full border-2 border-white" src="./1967841389332922368/23b8b1842d9d060a76ec9841dcedf1d5.png"> 
           <div class="w-8 h-8 rounded-full border-2 border-white bg-neutral flex items-center justify-center text-xs text-text-tertiary">
             +3 
           </div> 
          </div> 
          <button class="text-primary text-sm hover:underline view-activity-btn" data-activity-id="9"> 查看报告 </button> 
         </div> 
        </div> 
       </div> 
       <!-- 原有已完成活动 --> 
       <div class="border border-neutral-dark rounded-lg overflow-hidden hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1"> 
        <div class="h-40 bg-gradient-to-r from-secondary to-secondary-dark relative"> 
         <img alt="春季销售竞赛" class="w-full h-full object-cover opacity-30" src="./1967841389332922368/3dfa54e16cc8c728293e5a790d03cb9b.png"> 
         <div class="absolute inset-0 flex items-center justify-center" data-ytextravalue="extra-vnz50p4bx"> 
         </div> 
         <div class="absolute top-3 right-3"> 
         </div> 
        </div> 
        <div class="p-4"> 
         <h4 class="text-2xl font-bold text-white" data-ytparentvalue="extra-vnz50p4bx" data-ytoriginindex="0" data-ytindex="0" style="opacity: 1; font-family: Inter, system-ui, sans-serif; font-size: 24px; font-weight: 700; font-style: normal; line-height: 32px; text-align: start; text-indent: 0px;color:#000000FF;"> 春季销售竞赛 </h4> 
         <div class="flex items-center justify-between mb-3"> 
          <div class="text-sm text-text-secondary"> 
           <i class="fas fa-calendar mr-1"> </i> 2023-03-01 至 2023-05-31 
          </div> 
          <div class="text-sm font-medium text-secondary">
            已结束 
          </div> 
         </div> 
         <p class="text-sm text-text-secondary mb-4"> 春季销售业绩竞赛，提升第一季度销售业绩，完成年度目标30%。 </p> 
         <div class="mb-4"> 
          <div class="flex items-center justify-between text-sm mb-1"> 
           <span class="text-text-tertiary"> 最终排名 </span> 
           <span class="font-medium"> 第1名 </span> 
          </div> 
          <div class="w-full bg-neutral rounded-full h-2"> 
           <div class="bg-secondary h-2 rounded-full" style="width: 100%;"> 
           </div> 
          </div> 
         </div> 
         <div class="flex items-center justify-between"> 
          <div class="flex -space-x-2"> 
           <img alt="参与者" class="w-8 h-8 rounded-full border-2 border-white" src="./1967841389332922368/23b8b1842d9d060a76ec9841dcedf1d5.png"> 
           <img alt="参与者" class="w-8 h-8 rounded-full border-2 border-white" src="./1967841389332922368/23b8b1842d9d060a76ec9841dcedf1d5.png"> 
           <img alt="参与者" class="w-8 h-8 rounded-full border-2 border-white" src="./1967841389332922368/23b8b1842d9d060a76ec9841dcedf1d5.png"> 
           <div class="w-8 h-8 rounded-full border-2 border-white bg-neutral flex items-center justify-center text-xs text-text-tertiary">
             +8 
           </div> 
          </div> 
          <button class="text-primary text-sm hover:underline view-activity-btn" data-activity-id="5"> 查看结果 </button> 
         </div> 
        </div> 
       </div> 
       <div class="border border-neutral-dark rounded-lg overflow-hidden hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1"> 
        <div class="h-40 bg-gradient-to-r from-danger to-danger-dark relative"> 
         <img alt="夏季促销PK赛" class="w-full h-full object-cover opacity-30" src="./1967841389332922368/7736954b1b5b070c2457d8589bbdf78b.png"> 
         <div class="absolute inset-0 flex items-center justify-center" data-ytextravalue="extra-7vyqjgyk2"> 
         </div> 
         <div class="absolute top-3 right-3" data-ytextravalue="extra-82p6fmh52"> 
         </div> 
        </div> 
        <div class="p-4"> 
         <h4 class="text-2xl font-bold text-white" data-ytparentvalue="extra-7vyqjgyk2" data-ytoriginindex="0" data-ytindex="0" style="opacity: 1; font-family: Inter, system-ui, sans-serif; font-size: 24px; font-weight: 700; font-style: normal; line-height: 32px; text-align: start; text-indent: 0px;color:#000000FF;"> 夏季促销PK赛 </h4> 
         <div class="flex items-center justify-between mb-3"> 
          <div class="text-sm text-text-secondary"> 
           <i class="fas fa-calendar mr-1"> </i> 2023-06-01 至 2023-08-31 
          </div> 
          <div class="text-sm font-medium text-secondary">
            已结束 
          </div> 
         </div> 
         <p class="text-sm text-text-secondary mb-4"> 夏季产品促销PK赛，推广新产品系列，提高市场占有率。 </p> 
         <div class="mb-4"> 
          <div class="flex items-center justify-between text-sm mb-1"> 
           <span class="text-text-tertiary"> 最终排名 </span> 
           <span class="font-medium"> 第3名 </span> 
          </div> 
          <div class="w-full bg-neutral rounded-full h-2"> 
           <div class="bg-danger h-2 rounded-full" style="width: 70%;"> 
           </div> 
          </div> 
         </div> 
         <div class="flex items-center justify-between"> 
          <div class="flex -space-x-2"> 
           <img alt="参与者" class="w-8 h-8 rounded-full border-2 border-white" src="./1967841389332922368/23b8b1842d9d060a76ec9841dcedf1d5.png"> 
           <img alt="参与者" class="w-8 h-8 rounded-full border-2 border-white" src="https://design.gemcoder.com/staticResource/echoAiSystemImages/23b8b1842d9d060a76ec9841dcedf1d5.png"> 
           <img alt="参与者" class="w-8 h-8 rounded-full border-2 border-white" src="./1967841389332922368/23b8b1842d9d060a76ec9841dcedf1d5.png"> 
           <div class="w-8 h-8 rounded-full border-2 border-white bg-neutral flex items-center justify-center text-xs text-text-tertiary">
             +10 
           </div> 
          </div> 
          <button class="text-primary text-sm hover:underline view-activity-btn" data-activity-id="6"> 查看结果 </button> 
         </div> 
        </div> 
       </div> 
       <div class="border border-neutral-dark rounded-lg overflow-hidden hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1"> 
        <div class="h-40 bg-gradient-to-r from-purple-500 to-purple-600 relative"> 
         <img alt="中秋特别活动" class="w-full h-full object-cover opacity-30" src="./1967841389332922368/74953edef700c95ebd6aa5f8d2d2a8a6.png"> 
         <div class="absolute inset-0 flex items-center justify-center" data-ytextravalue="extra-esxm8ovvt"> 
         </div> 
         <div class="absolute top-3 right-3"> 
         </div> 
        </div> 
        <div class="p-4" data-ytextravalue="extra-edwo76ftv"> 
         <h4 class="text-2xl font-bold text-white" data-ytparentvalue="extra-esxm8ovvt" data-ytoriginindex="0" data-ytindex="0" style="opacity: 1; font-family: Inter, system-ui, sans-serif; font-size: 24px; font-weight: 700; font-style: normal; line-height: 32px; text-align: start; text-indent: 0px;color:#000000FF;" data-selectorname="#id-4jsmu"> 中秋特别活动 </h4> 
         <div class="flex items-center justify-between mb-3" data-ytoriginindex="1" data-ytindex="1"> 
          <div class="text-sm text-text-secondary"> 
           <i class="fas fa-calendar mr-1"> </i> 2023-09-01 至 2023-09-30 
          </div> 
          <div class="text-sm font-medium text-secondary">
            已结束 
          </div> 
         </div> 
         <p class="text-sm text-text-secondary mb-4" data-ytoriginindex="2" data-ytindex="2"> 中秋节特别促销活动，推出节日限定套餐，提升客户满意度。 </p> 
         <div class="mb-4" data-ytoriginindex="3" data-ytindex="3"> 
          <div class="flex items-center justify-between text-sm mb-1"> 
           <span class="text-text-tertiary"> 最终排名 </span> 
           <span class="font-medium"> 第2名 </span> 
          </div> 
          <div class="w-full bg-neutral rounded-full h-2"> 
           <div class="bg-purple-500 h-2 rounded-full" style="width: 85%;"> 
           </div> 
          </div> 
         </div> 
         <div class="flex items-center justify-between" data-ytoriginindex="4" data-ytindex="4"> 
          <div class="flex -space-x-2"> 
           <img alt="参与者" class="w-8 h-8 rounded-full border-2 border-white" src="./1967841389332922368/23b8b1842d9d060a76ec9841dcedf1d5.png"> 
           <img alt="参与者" class="w-8 h-8 rounded-full border-2 border-white" src="./1967841389332922368/23b8b1842d9d060a76ec9841dcedf1d5.png"> 
           <img alt="参与者" class="w-8 h-8 rounded-full border-2 border-white" src="https://design.gemcoder.com/staticResource/echoAiSystemImages/23b8b1842d9d060a76ec9841dcedf1d5.png"> 
           <div class="w-8 h-8 rounded-full border-2 border-white bg-neutral flex items-center justify-center text-xs text-text-tertiary">
             +5 
           </div> 
          </div> 
          <button class="text-primary text-sm hover:underline view-activity-btn" data-activity-id="7"> 查看结果 </button> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <!-- PK活动数据统计 --> 
    </div> 
    <!-- 其他页面内容保持不变 --> 
    <div class="page hidden" id="page-monthly-tasks"> 
    </div> 
    <div class="page hidden" id="page-latest-announcements"> 
    </div> 
    <div class="page hidden" id="page-historical-announcements"> 
    </div> 
    <div class="page hidden" id="page-goal-dashboard"> 
    </div> 
    <div class="page hidden" id="page-performance-entry"> 
    </div> 
    <div class="page hidden" id="page-product-library"> 
    </div> 
    <div class="page hidden" id="page-marketing-plan"> 
    </div> 
    <div class="page hidden" id="page-customer-records"> 
    </div> 
   </div> 
  </main> 
  <!-- 创建PK活动弹窗 --> 
  <div id="add-pk-activity-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> 
   <div class="bg-white rounded-lg w-full max-w-3xl max-h-[90vh] overflow-y-auto"> 
    <div class="p-5 border-b border-neutral-dark flex justify-between items-center sticky top-0 bg-white z-10"> 
     <h3 class="text-lg font-semibold"> 创建PK活动 </h3> 
     <button id="close-add-pk-activity-modal" class="text-text-secondary hover:text-text-primary transition-colors duration-200"> <i class="fas fa-times text-xl"> </i> </button> 
    </div> 
    <div class="p-5"> 
     <form id="add-pk-activity-form"> 
      <div class="grid grid-cols-2 gap-4 mb-4"> 
       <div> 
        <label class="block text-sm font-medium text-text-secondary mb-1"> 活动名称 <span class="text-red-500"> * </span> </label> 
        <input type="text" class="input-field" placeholder="请输入活动名称" required> 
       </div> 
       <div> 
        <label class="block text-sm font-medium text-text-secondary mb-1"> PK类型 <span class="text-red-500"> * </span> </label> 
        <select class="input-field" id="pk-type-select" required> <option value> 请选择PK类型 </option> <option value="team"> 团队PK </option> <option value="individual"> 个人PK </option> </select> 
       </div> 
      </div> 
      <div class="grid grid-cols-2 gap-4 mb-4" id="team-pk-section"> 
       <div> 
        <label class="block text-sm font-medium text-text-secondary mb-1"> PK团队A <span class="text-red-500"> * </span> </label> 
        <select class="input-field" required> <option value> 请选择团队 </option> <option value="team1"> 销售一部 </option> <option value="team2"> 销售二部 </option> <option value="team3"> 销售三部 </option> <option value="team4"> 北区销售团队 </option> <option value="team5"> 南区销售团队 </option> </select> 
       </div> 
       <div> 
        <label class="block text-sm font-medium text-text-secondary mb-1"> PK团队B <span class="text-red-500"> * </span> </label> 
        <select class="input-field" required> <option value> 请选择团队 </option> <option value="team1"> 销售一部 </option> <option value="team2"> 销售二部 </option> <option value="team3"> 销售三部 </option> <option value="team4"> 北区销售团队 </option> <option value="team5"> 南区销售团队 </option> </select> 
       </div> 
      </div> 
      <div class="grid grid-cols-2 gap-4 mb-4 hidden" id="individual-pk-section"> 
       <div> 
        <label class="block text-sm font-medium text-text-secondary mb-1"> 参与部门 <span class="text-red-500"> * </span> </label> 
        <select class="input-field" required> <option value> 请选择部门 </option> <option value="all"> 全公司 </option> <option value="sales"> 销售部 </option> <option value="marketing"> 市场部 </option> <option value="north"> 北区 </option> <option value="south"> 南区 </option> </select> 
       </div> 
       <div> 
        <label class="block text-sm font-medium text-text-secondary mb-1"> 参与人员范围 <span class="text-red-500"> * </span> </label> 
        <select class="input-field" required> <option value> 请选择范围 </option> <option value="all"> 全部人员 </option> <option value="manager"> 管理人员 </option> <option value="staff"> 普通员工 </option> <option value="custom"> 自定义 </option> </select> 
       </div> 
      </div> 
      <div class="mb-4"> 
       <label class="block text-sm font-medium text-text-secondary mb-1"> PK目的 <span class="text-red-500"> * </span> </label> 
       <textarea class="input-field" rows="2" placeholder="请描述本次PK活动的目的和预期效果" required>
        </textarea> 
      </div> 
      <div class="grid grid-cols-2 gap-4 mb-4"> 
       <div> 
        <label class="block text-sm font-medium text-text-secondary mb-1"> 开始时间 <span class="text-red-500"> * </span> </label> 
        <input type="date" class="input-field" required> 
       </div> 
       <div> 
        <label class="block text-sm font-medium text-text-secondary mb-1"> 结束时间 <span class="text-red-500"> * </span> </label> 
        <input type="date" class="input-field" required> 
       </div> 
      </div> 
      <div class="grid grid-cols-2 gap-4 mb-4"> 
       <div> 
        <label class="block text-sm font-medium text-text-secondary mb-1"> PK维度 <span class="text-red-500"> * </span> </label> 
        <select class="input-field" required> <option value> 请选择PK维度 </option> <option value="new_customers"> 新增客户数 </option> <option value="performance"> 业绩 </option> <option value="completion_rate"> 业绩完成率 </option> </select> 
       </div> 
       <div> 
        <label class="block text-sm font-medium text-text-secondary mb-1"> 负责人 <span class="text-red-500"> * </span> </label> 
        <select class="input-field" required> <option value> 请选择负责人 </option> <option value="1"> 张明 </option> <option value="2"> 李华 </option> <option value="3"> 王芳 </option> <option value="4"> 赵强 </option> </select> 
       </div> 
      </div> 
      <div class="mb-4"> 
       <label class="block text-sm font-medium text-text-secondary mb-1"> PK内容与规则 <span class="text-red-500"> * </span> </label> 
       <textarea class="input-field" rows="3" placeholder="请详细描述PK的具体内容、规则和评判标准" required>
        </textarea> 
      </div> 
      <div class="mb-4"> 
       <label class="block text-sm font-medium text-text-secondary mb
<label class=" block text-sm font-medium text-text-secondary mb-1'> 奖惩说明 <span class="text-red-500"> * </span> </label> 
       <textarea class="input-field" rows="3" placeholder="请详细描述PK的奖励和惩罚措施" required>
        </textarea> 
      </div> 
      <div class="mb-4"> 
       <label class="block text-sm font-medium text-text-secondary mb-1"> 活动备注 </label> 
       <textarea class="input-field" rows="2" placeholder="请输入其他需要说明的事项">
        </textarea> 
      </div> 
      <div class="mb-4"> 
       <label class="block text-sm font-medium text-text-secondary mb-1"> 附件上传 </label> 
       <div class="border-2 border-dashed border-neutral-dark rounded-md p-6 text-center hover:border-primary transition-colors duration-200 cursor-pointer"> 
        <i class="fas fa-cloud-upload-alt text-3xl text-text-tertiary mb-2"> </i> 
        <p class="text-text-secondary mb-1"> 点击或拖拽文件至此处上传 </p> 
        <p class="text-xs text-text-tertiary"> 支持PDF、Word、Excel格式，单个文件不超过10MB </p> 
       </div> 
      </div> 
     </form> 
    </div> 
    <div class="p-5 border-t border-neutral-dark flex justify-end space-x-3 sticky bottom-0 bg-white"> 
     <button id="cancel-add-pk-activity-btn" class="btn-outline px-6"> 取消 </button> 
     <button id="save-add-pk-activity-btn" class="btn-primary px-6"> 保存 </button> 
    </div> 
   </div> 
  </div> 
  <script>// 页面加载时初始化
            document.addEventListener('DOMContentLoaded', () => {
                // 菜单切换功能
                const menuItems = document.querySelectorAll('.menu-item[data-menu]');
                menuItems.forEach(item => {
                    item.addEventListener('click', () => {
                        // 移除所有菜单的活动状态
                        document.querySelectorAll('.menu-item').forEach(menu => { menu.classList.remove('menu-item-active'); });
                        
                        // 添加当前菜单的活动状态
                        item.classList.add('menu-item-active'); 
                        
                        const menuId = item.getAttribute('data-menu');
                        const submenu = document.getElementById(`submenu-${menuId}`);
                        const icon = item.querySelector('i:last-child');
                        
                        // 切换子菜单显示/隐藏
                        if (submenu.classList.contains('hidden')) {
                            submenu.classList.remove('hidden');
                            icon.classList.remove('fa-chevron-right');
                            icon.classList.add('fa-chevron-down');
                        } else {
                            submenu.classList.add('hidden');
                            icon.classList.remove('fa-chevron-down');
                            icon.classList.add('fa-chevron-right');
                        }
                    });
                });
                
                // 子菜单切换功能
                const submenuItems = document.querySelectorAll('.submenu-item[data-page]');
                submenuItems.forEach(item => {
                    item.addEventListener('click', () => {
                        // 移除所有子菜单的活动状态
                        document.querySelectorAll('.submenu-item').forEach(submenu => { submenu.classList.remove('submenu-item-active'); });
                        
                        // 添加当前子菜单的活动状态
                        item.classList.add('submenu-item-active');
                        
                        // 获取页面ID和面包屑信息
                        const pageId = item.getAttribute('data-page');
                        const parentMenu = item.closest('.submenu').id.replace('submenu-', '');
                        const parentMenuText = document.querySelector(`.menu-item[data-menu="${parentMenu}"] span`).textContent;
                        const currentMenuText = item.querySelector('span').textContent;
                        
                        // 更新面包屑
                        document.getElementById('breadcrumb').innerHTML = `










<span>${parentMenuText}</span>
  <i class="fas fa-angle-right mx-2 text-xs">
  </i>
  <span>${currentMenuText}</span>
    
    
    
    
    
    
    
    
    
    
    
    
  `;
                        
                        // 切换页面显示
                        document.querySelectorAll('.page').forEach(page => { page.classList.add('hidden'); });
                        document.getElementById(`page-${pageId}`).classList.remove('hidden');
                    });
                });
                
                // 侧边栏切换功能
                const toggleSidebar = document.getElementById('toggle-sidebar');
                const sidebar = document.getElementById('sidebar');
                toggleSidebar.addEventListener('click', () => {
                    if (sidebar.classList.contains('w-220')) {
                        sidebar.classList.remove('w-220');  
                        sidebar.classList.add('w-20');
                        // 隐藏菜单文本
                        document.querySelectorAll('.menu-item span:first-of-type').forEach(text => { text.classList.add('hidden'); });
                        document.querySelectorAll('.submenu').forEach(submenu => { submenu.classList.add('hidden'); });
                        document.querySelectorAll('.menu-item i:last-child').forEach(icon => { icon.classList.add('hidden'); });
                    } else {
                        sidebar.classList.remove('w-20');
                        sidebar.classList.add('w-220');
                        // 显示菜单文本
                        document.querySelectorAll('.menu-item span:first-of-type').forEach(text => { text.classList.remove('hidden'); });
                        // 恢复之前打开的子菜单
                        document.querySelectorAll('.menu-item-active').forEach(menu => {
                            const menuId = menu.getAttribute('data-menu');
                            const submenu = document.getElementById(`submenu-${menuId}`);
                            if (submenu) { submenu.classList.remove('hidden'); }
                        });
                        document.querySelectorAll('.menu-item i:last-child').forEach(icon => { icon.classList.remove('hidden'); });
                    }
                });
                
                
                // PK类型选择切换
                const pkTypeSelect = document.getElementById('pk-type-select');
                const teamPKSection = document.getElementById('team-pk-section');
                const individualPKSection = document.getElementById('individual-pk-section');
                
                pkTypeSelect.addEventListener('change', () => {
                    if (pkTypeSelect.value === 'team') {
                        teamPKSection.classList.remove('hidden');
                        individualPKSection.classList.add('hidden');
                    } else if (pkTypeSelect.value === 'individual') {
                        teamPKSection.classList.add('hidden');
                        individualPKSection.classList.remove('hidden');
                    } else {
                        teamPKSection.classList.remove('hidden');
                        individualPKSection.classList.add('hidden');
                    }
                });
                
                // 创建PK活动弹窗功能
                const addPKActivityBtn = document.getElementById('add-pk-activity-btn');
                const addPKActivityModal = document.getElementById('add-pk-activity-modal');
                const closeAddPKActivityModal = document.getElementById('close-add-pk-activity-modal');
                const cancelAddPKActivityBtn = document.getElementById('cancel-add-pk-activity-btn');
                const saveAddPKActivityBtn = document.getElementById('save-add-pk-activity-btn');
                
                addPKActivityBtn.addEventListener('click', () => {
                    addPKActivityModal.classList.remove('hidden');
                    // 重置表单
                    document.getElementById('add-pk-activity-form').reset();
                    // 默认显示团队PK部分
                    teamPKSection.classList.remove('hidden');
                    individualPKSection.classList.add('hidden');
                    pkTypeSelect.value = '';
                    // 阻止背景滚动
                    document.body.style.overflow = 'hidden';
                });
                
                function closeAddPKActivityModalFunc() {
                    addPKActivityModal.classList.add('hidden');
                    // 恢复背景滚动
                    document.body.style.overflow = '';
                }
                
                closeAddPKActivityModal.addEventListener('click', closeAddPKActivityModalFunc);
                cancelAddPKActivityBtn.addEventListener('click', closeAddPKActivityModalFunc);
                
                saveAddPKActivityBtn.addEventListener('click', () => {
                    // 这里添加表单提交逻辑
                    alert('PK活动创建成功！');
                    closeAddPKActivityModalFunc();
                });
                
                // 点击模态框外部关闭
                addPKActivityModal.addEventListener('click', (e) => {
                    if (e.target === addPKActivityModal) {
                        closeAddPKActivityModalFunc();
                    }
                });
                
                // 导入PK活动按钮点击事件
                const importPKActivityBtn = document.getElementById('import-pk-activity-btn');
                importPKActivityBtn.addEventListener('click', () => {
                    alert('导入PK活动功能即将上线，敬请期待！');
                });
                
                // 导出PK活动按钮点击事件
                const exportPKActivityBtn = document.getElementById('export-pk-activity-btn');
                exportPKActivityBtn.addEventListener('click', () => {
                    alert('正在导出PK活动数据，请稍候...');
                });
                
                // 查看活动详情按钮点击事件
                const viewActivityBtns = document.querySelectorAll('.view-activity-btn');
                viewActivityBtns.forEach(btn => {
                    btn.addEventListener('click', () => {
                        const activityId = btn.getAttribute('data-activity-id');
                        alert(`查看活动ID: ${activityId} 的详情`);
                        // 这里可以添加跳转到活动详情页的逻辑
                    });
                });
                
                // 报名活动按钮点击事件
                const joinActivityBtns = document.querySelectorAll('.join-activity-btn');
                joinActivityBtns.forEach(btn => {
                    btn.addEventListener('click', () => {
                        const activityId = btn.getAttribute('data-activity-id');
                        if (btn.textContent.includes('立即报名')) {
                            alert(`成功报名活动ID: ${activityId}`);
                            btn.innerHTML = `










<i class="fas fa-check mr-1">
</i> 已报名










`;
                            btn.classList.remove('btn-primary');
                            btn.classList.add('btn-outline');
                        } else if (btn.textContent.includes('提醒我')) {
                            alert(`已设置活动ID: ${activityId} 的开始提醒`);
                            btn.innerHTML = `










<i class="fas fa-bell-slash mr-1">
</i> 已提醒










`;
                        }
                    });
                });
            });</script>  
 </body>
</html>